<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <title>ESF</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/site.css" />
    </head>
    <body>
        <div class="est-header" id="header">
            <div class="ui-navbar">
                <h1 id="branding" class="ui-navbar-content">
                    <a class="ui-navbar-content-link" href="index.html">ESF</a>
                </h1>
                <ul class="ui-navbar-nav ui-navbar-pull-right">
                    <li>
                        <a href="home.html" target="container-frame"><span class="ui-icon-home"></span> 介绍</a>
                    </li>
                    <li>
                        <a href="#"><span class="ui-icon-css3"></span> 基础CSS</a>
                        <ul class="ui-submenu">
                            <li><a href="type.html" target="container-frame"><span class="ui-icon-text-height"></span> 基础元素</a></li>
                            <li><a href="image.html" target="container-frame"><span class="ui-icon-file-image-o"></span> 图片</a></li>
                            <li><a href="loader.html" target="container-frame"><span class="ui-icon-spinner"></span> 加载指示</a></li>
                            <li><a href="mask.html" target="container-frame"><span class="ui-icon-ban"></span> 遮罩</a></li>
                            <li><a href="progress.html" target="container-frame"><span class="ui-icon-fast-forward"></span> 进度条</a></li>
                            <li><a href="label.html" target="container-frame"><span class="ui-icon-adn"></span> 标签</a></li>
                            <li><a href="text.html" target="container-frame"><span class="ui-icon-file-text-o"></span> 文本</a></li>
                            <li><a href="panel.html" target="container-frame"><span class="ui-icon-square-o"></span> 面板</a></li>
                            <li><a href="dropdown.html" target="container-frame"><span class="ui-icon-bars"></span> 下拉列表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ui-icon-check-square"></span> 表单元素
                        </a>
                        <ul class="ui-submenu">
                            <li><a href="button.html" target="container-frame">按钮</a></li>
                            <li><a href="checkbox.html" target="container-frame">Checkbox</a></li>
                            <li><a href="input.html" target="container-frame">输入框</a></li>
                            <li><a href="form.html" target="container-frame">表单</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><span class="ui-icon-anchor"></span> 导航</a>
                        <ul class="ui-submenu ui-submenu-fill-width ui-submenu-align-right">
                            <li><a href="navbar.html" target="container-frame"><span class="ui-icon-plane"></span> 站点横向导航</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="est-body">
            <div id="content-container">
                <div id="content" style="overflow:hidden;">
                    <iframe frameborder="0" id="container-frame" name="container-frame" src="home.html" seamless>
                    </iframe>
                </div>
            </div>
        </div>
    </body>
    <script>
        var onResize = function () {
            var headerHeight = document.getElementById('header').offsetHeight;
            
            var h = (Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - headerHeight) + 'px';
            document.getElementById('container-frame').style.height = h;
            document.getElementById('content').style.height = h;
        };
        onResize();
        window.onresize = onResize;
    </script>
</html>
